<%--
  Created by IntelliJ IDEA.
  User: kz
  Date: 2017/8/16
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%--<meta name="viewport" content="width=device-width, initial-scale=1">--%>
    <%@include file="../include/boothead.jsp" %>
    <%@include file="../loginout/Modal_Logout.jsp"%>

    <style type='text/css'>
        body {
            background-color: #e7e7e7;
        }

        #content {
            background-color: #FFF;
            border-radius: 5px;
        }

        #content .main {
            padding: 20px;
        }

        #content .sidebar {
            padding: 10px;
        }

        #content p {
            line-height: 30px;
        }
    </style>


    <script>

        var timeron = false;
        var thetimer;

        $(function () {
//            tableInit();        //初始化页TABLE
        })

        function tableInit(){
            $("#id_maintable").bootstrapTable({
                columns:[{
                    field:'ind',
                    title:'参数索引'
                },{
                    field:'addrdesc',
                    title:'参数描述'
                },{
                    field:'valStr',
                    title:'参数数值'
                }],
                pageSize: 30,
                search: true,
                url: 'getgroupone',
                showRefresh: true,
                sortable: false,
                method: 'get'


            })
        }

        function refreshOnOff() {
            if (timeron == true) {
                timeron = false;
                clearInterval(thetimer);


            } else {
                timeron = true;
                thetimer = setInterval(getGroupOne, 1000);
            }

        }

        function getGroupOne() {

            $.ajax({
                url: "getgroupone",
                type: "GET",
                dataType: "json",
                timeout: "1000",
                cache: "false",
                success: succFunc,
                error: errFunc
            })

            function errFunc(data) {
//                alert("err" + data);
                $("#id_maindiv").text("AJAX错误");
            }

            function succFunc(data) {   //获取之后,更新界面
                var json = eval(data).groups; //数组
                var tableStr = "<div>"+ data.DeviceName+ "</div>"
                    +  "<table class='table table-striped table-bordered table-hover table-condensed'>" +
                "<tr><th>参数索引</th><th>参数描述</th><th>参数数值</th></tr>";

                $.each(json, function (index, item) {

                    $.each(item.addresses, function (index2, item2) {
                        tableStr += "<tr><td width='200'>" + item2.ind + "</td><td width='300'>" + item2.addrdesc + "</td><td>" + item2.valStr + "</td></tr>";
                    })


                });
                tableStr += "</table>"

                $("#id_maindiv").html(tableStr);

            }
        }


    </script>

    <%--<link type="text/css" href="/resources/Bootstrap3Nav/css/style.css" rel="stylesheet">--%>
    <title>
        Remote Hi UI
    </title>

</head>

<body>


<%--建立一个宽度为2的左侧参数组切换栏--%>

<nav class="navbar navbar-inverse " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar_1">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Hi 远程UI测试界面</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar_1">
            <ul class="nav navbar-nav">
                <li class="glyphicon-bed"></li>
                <li class="active"><a href="#">连接池</a></li>
                <li><a href="#">驱动器状态</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        详细信息 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">用户设置</a></li>
                        <li><a href="#">服务器状态</a></li>
                        <li><a href="#">连接状态</a></li>
                        <li class="divider"></li>
                        <li><a href="#">海天官网</a></li>
                        <li class="divider"></li>
                        <li><a href="#">海天驱动官网</a></li>


                    </ul>
                </li>


            </ul>
            <ul class="nav navbar-nav pull-right">
                <%--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">--%>
                <li><a data-toggle="modal" data-target="#HiLogoutModal" >注销</a> </li>
                <li><a href="#"  onClick ="javascript :history.back(-1);"  >返回</a> </li>
            </ul>

        </div>
    </div>
</nav>


<%--定制菜单(非导航栏)--%>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 ">

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
                 href="#collapseOne">
                <h4 class="panel-title">

                    RU参数

                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">


                    <div class="container">

                        <button class="btn btn-primary" onclick="refreshOnOff()">刷新</button>

                    </div>


                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
                 href="#collapseTwo">
                <h4 class="panel-title">

                    菜单2

                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">

                    <div class="container">

                        无实质内容

                    </div>

                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
                 href="#collapseThree">
                <h4 class="panel-title">

                    MODAL测试,折叠第三部分

                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">

                  空白内容(已转移置顶部

                </div>
            </div>
        </div>
        <%--</div>--%>


    </div>


</div>

<%--</div>--%>


<%--建立一个宽度为9的参数显示区域--%>
<div class="col-md-8" id="content">


    <%--<div class="container-fluid" style="border:1px solid #ccebf7;border-radius:3px;" >--%>

    <div class="container-fluid" id="id_maindiv">

           这里是显示参数用区域
        <table id="id_maintable">

        </table>


    </div>


</div>

<div class="col-md-2">
    <h2>侧边工具栏</h2>
    <ul class="nav nav-tabs nav-stacked">
        <li><a href='#'>Another Link 1</a></li>
        <li><a href='#'>Another Link 2</a></li>
        <li><a href='#'>Another Link 3</a></li>
    </ul>
</div>


</body>

</html>
